@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

main.get-apps {
	.get-apps__wrapper {
		display: flex;
		flex-direction: column;
	}

	.get-apps__section {
		display: flex;
		flex-direction: column;
		margin-bottom: 24px;
		gap: 24px;

		@include break-huge {
			flex-direction: row;
		}
	}

	.get-apps__section > div {
		width: 100%;

		@include break-huge {
			width: 50%;
		}
	}

	.get-apps__card-header {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.get-apps__card-title-container {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.get-apps__section-title {
		font-size: $font-body;
		font-weight: 500;
		color: var(--studio-gray-50);
		margin-bottom: $grid-unit-20;
	}

	.get-apps__card-title {
		font-size: $font-body;
		font-weight: 500;
		color: var(--studio-gray-80);
	}

	.get-apps__card-subtitle {
		font-size: $font-body-small;
		color: var(--studio-gray-50);
		font-weight: 400;
		margin-bottom: 0;
	}

	.components-card-body  {
		padding: 24px;
		height: 100%;
		display: flex;
		gap: 16px;
		flex-direction: column;
		justify-content: space-between;
	}

	.get-apps__badges > .app-promo__qr-code {
		margin: 0;
	}

	.get-apps__badges > .app-promo__qr-code > .get-apps__card-text {
		font-size: $font-body-extra-small;
	}

	.get-apps__desktop-link {
		font-size: $font-body-extra-small;
	}

	.get-apps__desktop-button-label {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 3px;
	}

	.get-apps__not-available {
		font-size: $font-body-extra-small;
	}

	.get-apps__not-available > div {
		margin-top: 16px;
	}

	.get-apps__also-available {
		margin-top: 16px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px;
		font-size: $font-body-extra-small;
	}

	.get-apps__also-available-title {
		flex-shrink: 0;
	}

	.get-apps__also-available-list {
		display: contents;

		> a {
			display: inline-flex;
			align-items: center;
			gap: 2px;
		}
	}

	.get-apps__desktop-button {
		margin-right: 8px;

		.components-button {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			white-space: nowrap;
			height: auto;
			padding: 8px 14px;
			border: 0;
		}

		.split-button__main {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			white-space: nowrap;
		}

		.split-button.has-icon-text .gridicon {
			margin-right: 0;
		}
	}
}
